<template>
	<view>
		<van-cell :value="validTime()" label="您的身份" icon="manager" center>
			<!-- 使用 title 插槽来自定义标题 -->
			<template #title>
				<span class="custom-title">{{info.roleName}}</span>
			</template>
		</van-cell>

		<view>
			<!-- <view class="item" v-if='$auth.hasRoleOr(["ordinary","member","captain","region"])'>
				<image src="@/static/images/xgtc_03.png" mode="aspectFit"></image>
				<view class="js">
					<view>升级为区域队长</view>
					<template v-if="info.regionEffectiveTime">
						<view>您的注册区域已有区域队长</view>
						<view>有效时间至：{{info.regionEffectiveTime}}</view>
					</template>
					<template v-else>
						<view>年费￥：{{zeroTwo(info.region)}}</view>
						<view>有效时间：1年</view>
					</template>
					<view>
						<van-tag type="primary" @click="openPopup(0)">点击查看权益</van-tag>
						<view v-if='$auth.hasRole("region")'>
							<van-tag type="warning" size="large">您已是区域队长！无需升级。</van-tag>
						</view>
						<van-tag v-else type="success" @click="upgrade('region')" size="large"
							class="an">点此去升级</van-tag>
					</view>
				</view>
			</view> -->

			<view class="item" v-if='$auth.hasRoleOr(["ordinary","member"])'>
				<image src="@/static/images/xgtc_04.png" mode="aspectFit"></image>
				<view class="js">
					<view>升级为队长</view>
					<view>年费￥：{{zeroTwo(info.captain)}}</view>
					<view>有效时间：1年</view>
					<view>
						<van-tag type="primary" @click="openPopup(1)">点击查看权益</van-tag>
						<van-tag type="success" @click="upgrade('captain')" size="large" class="an">点此去升级</van-tag>
					</view>
				</view>
			</view>

			<view class="item" v-if='$auth.hasRole("ordinary")'>
				<image src="@/static/images/xgtc_01.png" mode="aspectFit"></image>
				<view class="js">
					<view>升级为队员</view>
					<view>年费￥：{{zeroTwo(info.member)}}</view>
					<view>有效时间：1年</view>
					<view>
						<van-tag type="primary" @click="openPopup(2)">点击查看权益</van-tag>
						<van-tag type="success" @click="upgrade('member')" size="large" class="an">点此去升级</van-tag>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="text" v-for="(item,index) of right">{{(index+1)+'. '+item}}</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		upgrade,
		upgradePay
	} from '@/api/my'

	import {
		state,
		stateByOrderNo
	} from '@/api/jinjian.js'

	export default {
		data() {
			return {
				info: {
					roleName: "",
					member: null,
					captain: null,
					region: null,
					regionEffectiveTime: null,
					time: null,

					orderNo: null
				},

				right: []
			}
		},
		onLoad() {
			upgrade().then(res => {
				this.info = res
			})
		},
		methods: {
			openPopup(i) {
				this.right = [
					[
						'可发展区域（县/区）内下级 队长，队员。',
						'队长名下全部推广订单您均可分得利润。',
						'队员全部推广订单您均可分得佣金。',
						'自己推广可自由定收益。',
						'享团队受优惠底价。'
					],
					[
						'可自用发展名下队员。',
						'队员全部推广订单您均可分得佣金。',
						'自己推广可自由定收益。',
						'享团队受优惠底价。'
					],
					[
						'自己推广可自由定收益。',
						'享团队受优惠底价。'
					]
				][i]
				this.$refs.popup.open('bottom')
			},
			validTime() {
				let s
				if (this.$auth.hasRoleOr(["region", "captain", "member"])) {
					s = this.info.time ? this.info.time : '暂无'
				} else {
					s = '永久'
				}
				return '有效时间至：' + s
			},
			upgrade(item) {
				if (!item) {
					this.$modal.msgError("请选择升级身份")
					return
				}
				if (item == 'region' && this.info.regionEffectiveTime) {
					this.$modal.msgError("您的注册区域已有区域队长")
					return
				}
				this.$modal.confirm("付费升级后请重新登录!").then(res => {
					if (res) {
						this.$modal.loading("正在发起支付")
						upgradePay({
							roleKey: item,
							payType: 'alipaysign'
						}).then(res => {
							let data = res.data
							this.orderNo = data.orderNo
							// 轮询逻辑
							let this_ = this
							this.intervalwx = window.setInterval(() => {
								stateByOrderNo(this_.orderNo).then(res => {
									console.log(res)
									if (res == 'SUCCESS') {
										this_.$store.dispatch('LogOut').then(() => {
											this_.$tab.reLaunch('/pages/index')
										})
										clearInterval(this_.intervalwx)
										this_.intervalwx = null
									}
								})
							}, 1800)

							this.$modal.closeLoading()
							if (data.code == 200) {
								const payUrl = data.data.payUrl
								window.location.href = payUrl
							} else {
								this.$modal.msgError(data.msg)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 15px;
		margin-top: 5px;
	}

	#t1 {
		font-size: 52rpx;
		font-family: AppleSystemUIFont;
		color: #FFFFFF;
		line-height: 56rpx;
		position: absolute;
		top: 10px;
	}

	#t2 {
		font-size: 11px;
		display: flex;
		flex-direction: column;
		right: 0;
		top: 2px;
		line-height: 18px;
		color: #fff;
		z-index: 100;
		margin-left: 28px;
		margin-top: 40px;
	}

	#b3 {
		top: 40px;
		right: 10px;
	}

	.item {
		margin: 6px;
		padding: 12px;
		background-color: #FFFFFF;
		border-radius: 6px;
		display: flex;
		justify-content: space-around;
		align-items: center;

		image {
			height: 80px;
			width: 30vw;
		}

		.js {
			width: 50vw;

			view {
				line-height: 25px;

			}

			.an {
				margin: 0 10px;
			}
		}
	}

	.popup-content {
		padding: 30px 15px;

		view {
			padding: 0 10px 10px;
		}
	}
</style>